<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
      class="formList"
    >
      <el-row>
        <!-- <el-col :span="6"> -->
        <el-form-item label="供应商" prop="supplierUid">
          <el-select
            v-model="queryParams.supplierUid"
            placeholder="请选择供应商"
            clearable
          >
            <el-option
              v-for="dict in supplierUidOptions"
              :key="dict.supplierUid"
              :label="dict.supplierName"
              :value="dict.supplierUid"
            />
          </el-select>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="6"> -->
        <el-form-item label="用户账号" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入用户账号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!-- </el-col>
        <el-col :span="6"> -->


        <el-form-item label="用户昵称" prop="nickName">
          <el-input
            v-model="queryParams.nickName"
            placeholder="请输入用户昵称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!-- </el-col> -->
      </el-row>
      <el-row>
        <!-- <el-col :span="6"> -->

        <!-- </el-col>
        <el-col :span="6"> -->
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input
            v-model="queryParams.phonenumber"
            placeholder="请输入手机号码"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item style="margin-left: 10px;">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >搜索
          </el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置
          </el-button
          >
        </el-form-item>
        <!-- </el-col> -->
      </el-row>
      <el-row>


      </el-row>
    </el-form>
    <el-row class="row-mbinfo" style="margin-left: 0px; margin-right: 0px;">
      <el-row>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['supplier:account:add']"
          >新增
          </el-button>
        </el-col>
        <!--        <el-col :span="1.5" style="margin-left: 10px;">-->
        <!--          <el-button-->
        <!--            type="success"-->
        <!--            plain-->
        <!--            icon="el-icon-edit"-->
        <!--            size="mini"-->
        <!--            :disabled="single"-->
        <!--            @click="handleUpdate"-->
        <!--            v-hasPermi="['supplier:account:edit']"-->
        <!--          >修改-->
        <!--          </el-button>-->
        <!--        </el-col>-->
        <!--        <el-col :span="1.5" style="margin-left: 10px;">-->
        <!--          <el-button-->
        <!--            type="danger"-->
        <!--            plain-->
        <!--            icon="el-icon-delete"-->
        <!--            size="mini"-->
        <!--            :disabled="multiple"-->
        <!--            @click="handleDelete"-->
        <!--            v-hasPermi="['supplier:account:remove']"-->
        <!--          >删除-->
        <!--          </el-button>-->
        <!--        </el-col>-->
        <el-col :span="1.5">
          <!--          <el-button-->
          <!--            type="warning"-->
          <!--            plain-->
          <!--            icon="el-icon-download"-->
          <!--            size="mini"-->
          <!--            @click="handleExport"-->
          <!--            v-hasPermi="['supplier:account:export']"-->
          <!--          >导出-->
          <!--          </el-button>-->
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
    </el-row>

    <div class="divTable">
      <el-table
        border
        v-loading="loading"
        :data="accountList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="供应商名称" min-width="100" align="center" prop="supplierName"/>
        <el-table-column
          label="用户账号"
          align="center"
          prop="userName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="用户昵称"
          align="center"
          prop="nickName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="用户邮箱"
          align="center"
          prop="email"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="手机号码"
          align="center"
          prop="phonenumber"
          width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="用户性别"
          align="center"
          prop="sex"
          :formatter="sexFormat"
        />

        <el-table-column
          label="状态"
          align="center"
          prop="status"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-value="0"
              inactive-value="1"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column
          label="最后登录时间"
          align="center"
          prop="loginDate"
          width="180"
        >
          <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.loginDate, '{y}-{m}-{d} {h}:{i}:{s}')
          }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="remark"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          fixed="right"
          width="130"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-zoom-in"
              @click="handleShowDetail(scope.row)"
              v-hasPermi="['supplier:account:query']"
            >查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['supplier:account:edit']"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-key"
              @click="handleResetPwd(scope.row)"
              v-hasPermi="['system:user:resetPwd']"
            >重置
            </el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              v-if="scope.row.status == '1'"
              @click="handleDelete(scope.row)"
              v-hasPermi="['supplier:account:remove']"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改账号管理对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="700px"
      append-to-body
      @keyup.enter.native="submitForm"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商" prop="supplierUid">
              <el-select v-model="form.supplierUid" placeholder="请选择供应商">
                <el-option
                  v-for="dict in supplierUidOptions"
                  :key="dict.supplierUid"
                  :label="dict.supplierName"
                  :value="dict.supplierUid"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名" prop="userName">
              <el-input
                v-model="form.userName"
                placeholder="请输入供应商账号"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入用户昵称"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item
              v-if="form.userId == undefined"
              label="用户密码"
              prop="password"
            >
              <el-input
                v-model="form.password"
                placeholder="请输入用户密码"
                type="password"
              />
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input
                v-model="form.phonenumber"
                placeholder="请输入手机号码"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择用户性别">
                <el-option
                  v-for="dict in sexOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :span="12">
          <el-col :span="12">
            <el-form-item label="用户邮箱" prop="email">
              <el-input
                v-model="form.email"
                placeholder="请输入用户邮箱"
              />
            </el-form-item
            >
          </el-col>
        </el-row>

        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入内容"
            maxlength="200"
            show-word-limit
            :autosize="autosize"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看账号管理对话框 -->
    <el-dialog
      :title="viewTitle"
      :visible.sync="viewOpen"
      width="700px"
      append-to-body
    >
      <el-form ref="detailForm">
        <div>
          <!-- <i class="MmsUiBlockTitle___line___27lhp1-44-1"></i> -->
          <div class="big_title_style" style="font-size: 18px">
            <span>账号信息</span>
          </div>
        </div>
        <el-divider></el-divider>
        <div style="margin-left: 50px">
          <el-row>
            <el-form-item>
              <el-form-item label="供应商名称">
                <span>{{ showData.supplierName }}</span>
              </el-form-item>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item>
                <el-form-item label="用户名">
                  <span>{{ showData.userName }}</span>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <el-form-item label="用户昵称">
                  <span>{{ showData.nickName }}</span>
                </el-form-item>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="12">
              <el-form-item label="手机号码">
                <span>{{ showData.phonenumber }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <el-form-item label="用户邮箱">
                  <span>{{ showData.email }}</span>
                </el-form-item>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="性别">
                <span>{{ showDataSex }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注">
                <span>{{ showData.remark }}</span>
              </el-form-item>
            </el-col>
          </el-row>

        </div>

        <div>
          <!-- <i class="MmsUiBlockTitle___line___27lhp1-44-1"></i> -->
          <div class="big_title_style" style="font-size: 18px">
            <span>其他信息</span>
          </div>
        </div>
        <el-divider></el-divider>
        <div style="margin-left: 50px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="最后登录时间">
                <span>{{ showData.loginDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后登录IP">
                <span>{{ showData.loginIp }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="更新时间">
                <span>{{ showData.updateTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更新人账号">
                <span>{{ showData.updateBy }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="创建时间">
                <span>{{ showData.createTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建人账号">
                <span>{{ showData.createBy }}</span>
              </el-form-item>
            </el-col>
          </el-row>

        </div>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="handCloseDetail"
        >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listAccount,
    addAccount,
    updateAccount
  } from '@/api/supplier/account'
  import {
    getById,
    delUser,
    resetUserPwd,
    changeUserStatus
  } from '@/api/system/user'
  import {getSupplierList} from '@/api/supplier/info'
  //验证密码
  let password = (rule, value, callback) => {
    let reg = /^[0-9]{1,16}$/
    if (!reg.test(value)) {
      callback(new Error('请输入16为以内数字'))
    } else {
      callback()
    }
  }
  export default {
    name: 'Account',
    components: {},
    data() {
      return {
        supplierUidOptions:[],
        //用户性别翻译
        showDataSex: '',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 账号管理表格数据
        accountList: [],
        // 弹出层标题
        title: '',
        //查看详细标题
        viewTitle: '',
        // 是否显示弹出层
        open: false,
        //是否显示查看详细弹出层
        viewOpen: false,
        //查看详细数据
        showData: [],
        // 用户性别字典
        sexOptions: [],
        // 帐号状态字典
        statusOptions: [],
        //供应商列表
        supplierUidOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: null,
          nickName: null,
          phonenumber: null,
          supplierUid: null
        },
        columns: [
          {
            label: '用户ID',
            dataIndex: 'userId'
          },
          {
            label: '部门ID',
            dataIndex: 'deptId'
          },
          {
            label: '用户账号',
            dataIndex: 'userName'
          },
          {
            label: '用户昵称',
            dataIndex: 'nickName'
          },
          {
            label: '用户类型（00系统用户）',
            dataIndex: 'userType'
          },
          {
            label: '用户邮箱',
            dataIndex: 'email'
          },
          {
            label: '手机号码',
            dataIndex: 'phonenumber'
          },
          {
            label: '用户性别',
            dataIndex: 'sex'
          },
          {
            label: '头像地址',
            dataIndex: 'avatar'
          },
          {
            label: '密码',
            dataIndex: 'password'
          },
          {
            label: '帐号状态',
            dataIndex: 'status'
          },
          {
            label: '删除标志（0代表存在 2代表删除）',
            dataIndex: 'delFlag'
          },
          {
            label: '最后登录IP',
            dataIndex: 'loginIp'
          },
          {
            label: '最后登录时间',
            dataIndex: 'loginDate'
          },
          {
            label: '创建者',
            dataIndex: 'createBy'
          },
          {
            label: '创建时间',
            dataIndex: 'createTime'
          },
          {
            label: '更新者',
            dataIndex: 'updateBy'
          },
          {
            label: '更新时间',
            dataIndex: 'updateTime'
          },
          {
            label: '备注',
            dataIndex: 'remark'
          },
          {
            label: '平台ID',
            dataIndex: 'platformUid'
          },
          {
            label: '供应商ID（平台账号为NULL）',
            dataIndex: 'supplierUid'
          }
        ],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          supplierUid: [
            {required: true, message: '请选择供应商', trigger: 'blur'}
          ],
          userName: [
            {required: true, message: '用户账号不能为空', trigger: 'blur'},
            {min: 1, max: 15, message: '用户账号长度在 3 到 15 个字符', trigger: 'blur'}
          ],
          nickName: [
            {required: true, message: '用户昵称不能为空', trigger: 'blur'},
            {min: 1, max: 15, message: '用户昵称长度在 3 到 15 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '用户密码不能为空', trigger: 'blur'},
            {
              type: 'number',
              validator: password,
              message: '输入16位以内数字',
              trigger: ['blur', 'change']
            }
          ],
          email: [
            {
              type: 'email',
              message: '\'请输入正确的邮箱地址',
              trigger: ['blur', 'change']
            }
          ],
          phonenumber: [
            {
              required: true,
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: '请输入正确的手机号码',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    created() {
      this.getList()
      this.getDicts('sys_user_sex').then((response) => {
        this.sexOptions = response.data
      })
      this.getDicts('sys_data_status').then((response) => {
        this.statusOptions = response.data
      })

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      getSupplierList(1).then((response) => {
        this.supplierUidOptions = response.data
      })
    },
    methods: {
      /** 查询账号管理列表 */
      getList() {
        this.loading = true

        listAccount(this.queryParams).then((response) => {
          this.accountList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      // 用户性别字典翻译
      sexFormat(row, column) {
        return this.selectDictLabel(this.sexOptions, row.sex)
      },
      // 帐号状态字典翻译
      statusFormat(row, column) {
        return this.selectDictLabel(this.statusOptions, row.status)
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          userId: null,
          deptId: null,
          userName: null,
          nickName: null,
          userType: null,
          email: null,
          phonenumber: null,
          sex: null,
          avatar: null,
          password: null,
          status: '0',
          delFlag: null,
          loginIp: null,
          loginDate: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          platformUid: null,
          supplierUid: null
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.userId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
        //用于禁用删除
        if (this.multiple == false) {
          for (var i = 0; i < selection.length; i++) {
            var element = selection[i]
            if ('1' === element.dataStatus) {
              this.multiple = true
              break
            }
          }
        }
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.title = '添加账号管理'
      },
      /** 查看详情按钮操作 **/
      handleShowDetail(row) {
        let this_ = this;
        this.viewOpen = true
        this.viewTitle = '查看账号管理'
        this.showData = row

        this.sexOptions.forEach(function (value, key) {
          if (value.dictValue == row.sex) {
            this_.showDataSex = value.dictLabel
            return false
          }
        })

      },
      handCloseDetail() {
        this.viewOpen = false
        this.showData = []
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        const userId = row.userId || this.ids
        getById(userId).then((response) => {
          this.form = response.data
          this.open = true
          this.title = '修改账号管理'
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.form.userId != null) {
              updateAccount(this.form).then((response) => {
                this.msgSuccess('修改成功')
                this.open = false
                this.getList()
              })
            } else {
              addAccount(this.form).then((response) => {
                this.msgSuccess('新增成功')
                this.open = false
                this.getList()
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const userIds = row.userId || this.ids
        this.$confirm(
          '是否确认删除用户编号为"' + userIds + '"的数据项?',
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(function () {
            return delUser(userIds)
          })
          .then(() => {
            this.getList()
            this.msgSuccess('删除成功')
          })
      },
      // 用户状态修改
      handleStatusChange(row) {
        let text = row.status === '0' ? '启用' : '停用'
        this.$confirm(
          '确认要"' + text + '""' + row.userName + '"用户吗?',
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(function () {
            return changeUserStatus(row.userId, row.status)
          })
          .then(() => {
            this.msgSuccess(text + '成功')
          })
          .catch(function () {
            row.status = row.status === '0' ? '1' : '0'
          })
      },
      /** 重置密码按钮操作 */
      handleResetPwd(row) {
        this.$prompt('请输入"' + row.userName + '"的新密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(({value}) => {
            resetUserPwd(row.userId, value).then((response) => {
              this.msgSuccess('修改成功，新密码是：' + value)
            })
          })
          .catch(() => {
          })
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          'supplier/account/export',
          {
            ...this.queryParams
          },
          `supplier_account.xlsx`
        )
      }
    }
  }
</script>
<style scoped>
  .MmsUiBlockTitle___line___27lhp1-44-1 {
    display: inline-block;
    background: #407cff;
    width: 2px;
    height: 16px;
    margin-right: 8px;
  }

  .MmsUiBlockTitle___title___2C-H-1-44-1 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
  }
</style>
